<template>
  <div class="theme-settings">
    <el-divider>主题模式</el-divider>
    <div class="theme-mode">
      <div
        class="theme-mode-item"
        :class="{ active: currentTheme === 'light' }"
        @click="handleThemeChange('light')"
      >
        <el-icon><Sunny /></el-icon>
        <span>浅色模式</span>
      </div>
      <div
        class="theme-mode-item"
        :class="{ active: currentTheme === 'dark' }"
        @click="handleThemeChange('dark')"
      >
        <el-icon><Moon /></el-icon>
        <span>深色模式</span>
      </div>
      <div
        class="theme-mode-item"
        :class="{ active: currentTheme === 'auto' }"
        @click="handleThemeChange('auto')"
      >
        <el-icon><Monitor /></el-icon>
        <span>跟随系统</span>
      </div>
    </div>

    <el-divider>主题色</el-divider>
    <div class="theme-colors">
      <div
        v-for="color in themeColors"
        :key="color.value"
        class="color-item"
        :style="{ backgroundColor: color.value }"
        :class="{ active: primaryColor === color.value }"
        @click="handleColorChange(color.value)"
      >
        <el-icon v-if="primaryColor === color.value"><Check /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Sunny, Moon, Monitor, Check } from '@element-plus/icons-vue'
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: 'light',
})
const toggleDark = useToggle(isDark)

const currentTheme = ref(localStorage.getItem('theme') || 'auto')
const primaryColor = ref(localStorage.getItem('primaryColor') || '#409eff')

const themeColors = [
  { name: '拂晓蓝', value: '#409eff' },
  { name: '薄暮红', value: '#f5222d' },
  { name: '极光绿', value: '#52c41a' },
  { name: '日暮橙', value: '#faad14' },
  { name: '酱紫', value: '#722ed1' },
  { name: '明青', value: '#13c2c2' },
]

const handleThemeChange = (theme: string) => {
  currentTheme.value = theme
  localStorage.setItem('theme', theme)
  
  if (theme === 'auto') {
    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
    toggleDark(isDarkMode)
    document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light')
    localStorage.removeItem('theme')
  } else {
    toggleDark(theme === 'dark')
    document.documentElement.setAttribute('data-theme', theme)
  }
}

const handleColorChange = (color: string) => {
  primaryColor.value = color
  localStorage.setItem('primaryColor', color)
  
  // 更新 Element Plus 主题色变量
  const el = document.documentElement
  el.style.setProperty('--el-color-primary', color)
  
  // 生成并设置主题色的不同亮度
  const mix = (color1: string, color2: string, weight: number) => {
    const d2h = (d: number) => d.toString(16).padStart(2, '0')
    const h2d = (h: string) => parseInt(h, 16)
    
    let c1 = color1.substring(1)
    let c2 = color2.substring(1)
    
    let mix = '#'
    
    for(let i = 0; i < 3; i++) {
      const c1Val = h2d(c1.substr(i * 2, 2))
      const c2Val = h2d(c2.substr(i * 2, 2))
      const val = Math.round(c1Val * (1 - weight) + c2Val * weight)
      mix += d2h(val)
    }
    
    return mix
  }
  
  // 生成不同亮度的主题色
  for (let i = 1; i <= 9; i++) {
    const lightColor = mix(color, '#ffffff', i * 0.1)
    el.style.setProperty(`--el-color-primary-light-${i}`, lightColor)
  }
  
  // 生成深色主题下的主题色
  const darkColor = mix(color, '#000000', 0.2)
  el.style.setProperty('--el-color-primary-dark-2', darkColor)
}

// 监听系统主题变化
const watchSystemTheme = () => {
  if (currentTheme.value === 'auto') {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleChange = (e: MediaQueryListEvent) => {
      toggleDark(e.matches)
      document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
    }
    mediaQuery.addEventListener('change', handleChange)
    return () => mediaQuery.removeEventListener('change', handleChange)
  }
}

onMounted(() => {
  // 初始化主题
  handleThemeChange(currentTheme.value)
  // 初始化主题色
  handleColorChange(primaryColor.value)
  // 监听系统主题变化
  watchSystemTheme()
})
</script>

<style scoped lang="scss">
.theme-settings {
  padding: 16px;
}

.theme-mode {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
  
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid var(--el-border-color);
    
    .el-icon {
      font-size: 24px;
      margin-bottom: 8px;
    }
    
    span {
      font-size: 14px;
    }
    
    &:hover {
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
    }
    
    &.active {
      background-color: var(--el-color-primary-light-9);
      border-color: var(--el-color-primary);
      color: var(--el-color-primary);
    }
  }
}

.theme-colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 16px 0;
  
  .color-item {
    aspect-ratio: 1;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    
    .el-icon {
      color: #fff;
      font-size: 16px;
    }
    
    &:hover {
      transform: scale(1.1);
    }
    
    &.active {
      transform: scale(1.1);
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--el-color-primary);
    }
  }
}
</style> 